<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>TKEStack - Login</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/oidc/static/style.css" rel="stylesheet" data-role="global">
    <link rel="apple-touch-icon" sizes="57x57" href="/oidc/static/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/oidc/static/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/oidc/static/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/oidc/static/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/oidc/static/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/oidc/static/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/oidc/static/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/oidc/static/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/oidc/static/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="/oidc/static/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/oidc/static/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/oidc/static/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/oidc/static/favicon-16x16.png">
    <link rel="manifest" href="/oidc/static/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="/oidc/static/ms-icon-144x144.png">
    <meta name="theme-color" content="#262626">
</head>

<body>
<div class="clg-head">
    <div class="clg-head-inner">
        <div class="clg-logo ">
            <a href="/">TKEStack</a>
        </div>
    </div>
</div>
<div class="clg-wrap">
    <div class="clg-wrap-inner">
        <form method="post" action="{{ .PostURL }}" id="loginForm">
            <div class="clg-wrap-con clg-onpage" id="loginBox">
                <div class="clg-mod J-commonLoginContent ">
                    <div class="clg-mod-tab J-loginContentBox J-qcloginBox">
                        <div class="clg-mod-tit J-txtLoginTitle">Login</div>
                        <div class="clg-form J-loginForm">
                            <ul class="clg-form-list">
                                <li>
                                    <div class="clg-form-input">
                                        <div class="clg-form-unit">
                                            <input
                                                    required id="login"
                                                    name="login"
                                                    {{ if .Username }} value="{{ .Username }}" {{ else }} autofocus {{ end }}
                                                    type="text"
                                                    class="clg-input J-username"
                                                    placeholder="Username"/>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="clg-form-input">
                                        <div class="clg-form-unit">
                                            <input
                                                    type="password"
                                                    required id="password"
                                                    value=""
                                                    name="password"
                                                    class="clg-input J-password"
                                                    placeholder="Password"
                                                    {{ if .Invalid }} autofocus {{ end }}
                                            />
                                        </div>
                                    </div>
                                </li>
                                <li style="display:none">
                                    <div class="clg-form-input">
                                        <div class="clg-form-unit">
                                            <input
                                                    type="text"
                                                    required id="tenant"
                                                    value="default"
                                                    name="tenant"
                                                    class="clg-input J-password"
                                                    placeholder="tenant"
                                                    {{ if .Invalid }} autofocus {{ end }}
                                            />
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <div class="clg-form-tips error J-loginTip"
                                 id="check-error"></div>
                            {{ if .Invalid }}
                                <div class="clg-form-tips error J-loginTip"
                                     id="login-error">Invalid username or password.
                                </div>
                            {{ end }}
                            <div class="clg-form-btn">
                                <button onclick="subForm();"
                                        class="clg-btn J-loginBtn">Login
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clg-wrap-aside">
                    <div class="clg-wrap-aside-inner">
                        <div class="clg-wrap-aside-tit">TKEStack</div>
                        <div class="clg-wrap-aside-list">
                            <ul>
                                <li><span>Container Management Platform</span></li>
                            </ul>
                        </div>
                        <div class="clg-wrap-aside-btn"></div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
        function checkForm () {
            var id = document.getElementById("login").value;
            var password = document.getElementById("password").value;
            var error = document.getElementById("check-error");
            if (id == "" || id == null || id == undefined) {
                error.innerHTML = "Username must be specify"
                return false;
            } else if (password == "" || password == null || password == undefined) {
                error.innerHTML = "Password must be specify"
                return false;
            } else {
                error.innerHTML = ""
                return true;
            }
        }
        function subForm(){
            if(checkForm ()){
                document.getElementById("loginForm").submit();
            }
        }

</script>
</body>
</html>
